<template>
    <view class="FineTuning" :class="{ active: show }">
        <!-- <view class="t-mask" :class="{ active: active }"></view> -->
        <view class="t-box">
            <view class="t-header">
                <!-- 4 个独立按钮 -->
                <view :class="{ 't-header-button': true, 'active': true }"
                      @click="handleButton1Click">上一个</view>
                <view
                      :class="{ 't-header-button': true, 'active': true }"
                      @click="handleButton2Click">下一个</view>
                <view
                      :class="{ 't-header-button': true, 'active': focusMode }"
                      @click="handleButton3Click">专注模式</view>
                <view
                      :class="{ 't-header-button': true, 'active': true }"
                      @click="handleButton4Click">关闭微调</view>
            </view>

            <view class="t-body">
                <view class="action-button" @click="bringForward">
                    <image src="/static/AddBarImg/bringForward.svg" class="icon" />
                    <text class="label">上一层</text>
                </view>
                <view class="action-button" @click="sendBackwards">
                    <image src="/static/AddBarImg/nextlayer.svg" class="icon" />
                    <text class="label">下一层</text>
                </view>
            </view>

        </view>
    </view>
</template>

<script>

import { autorun } from "mobx";
import designEditorRender from "../../DesignEditor/designEditorRender";
import designerStore from "../../DesignEditor/designerStore";
import editorBarStore from "../editorBarStore";

// 微调面板
export default {
    name: "FineTuning",
    props: {},
    data() {
        return {
            show: false,
            active: false,
            focusMode: false,
            btns: [
                // { name: "左对齐", icon: "", onClick: () => { } },
                // { name: "左移", icon: "", onClick: () => { } },
                // { name: "水平居中", icon: "", onClick: () => { } },
                // { name: "右对齐", icon: "", onClick: () => { } },
                // { name: "右移", icon: "", onClick: () => { } },
                // { name: "上对齐", icon: "", onClick: () => { } },
                // { name: "上移", icon: "", onClick: () => { } },
                // { name: "垂直居中", icon: "", onClick: () => { } },
                // { name: "下对齐", icon: "", onClick: () => { } },
                // { name: "下移", icon: "", onClick: () => { } },
                // { name: "左旋转", icon: "", onClick: () => { } },
                // { name: "右旋转", icon: "", onClick: () => { } },
                { name: "上一层", icon: "", onClick: () => { } },
                { name: "下一层", icon: "", onClick: () => { } },
            ]
        };
    },
    created() {
        this.dispose = autorun(() => {
            const { showFineTuning } = editorBarStore;
            if (showFineTuning) {
                this.show = true;
            } else {
                this.show = false;
                designerStore.setFocusMode(false);
            }
        }, { delay: 30 });
        this.dispose1 = autorun(() => {
            const { focusMode } = designerStore;
            this.focusMode = focusMode;
        }, { delay: 30 });
    },
    methods: {
        handleButton1Click() {
            designEditorRender.selectPrev();
        },
        handleButton2Click() {
            designEditorRender.selectNext();
        },
        handleButton3Click() {
            designerStore.setFocusMode(!this.focusMode);
        },
        handleButton4Click() {
            editorBarStore.setShowFineTuning(false);
        },
        //选中的对象上移动一层
        async bringForward() {
            const activeobj = designEditorRender.getActiveObject();
            if (activeobj) {
                designEditorRender.bringObjectForward(activeobj);
            }
        },
        //选中的对象下移动一层
        async sendBackwards() {
            const activeobj = designEditorRender.getActiveObject();
            if (activeobj) {
                designEditorRender.sendObjectBackwards(activeobj);
            }
        }
    },
    watch: {
    },
    //销毁
    destroyed() {
        this.dispose && this.dispose();
        this.dispose1 && this.dispose1();
    }
};
</script>

<style scoped lang="scss">
.FineTuning {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    bottom: 0px;
    transition: all 0.3s;
    transform: translateY(100%);

    &.active {
        transform: translateY(0%);
    }

}

.t-box {
    width: 100%;
    bottom: 0;
    padding: 30upx 0;
    padding-top: 0;
    background: #fff;
    transition: all 0.3s;
    transform: translateY(0%);
    padding-bottom: env(safe-area-inset-bottom);
}

.t-header {
    display: flex;
    justify-content: space-between;
    /* 均匀分布按钮 */
    align-items: center;
    width: calc(100% - 20px);
    height: 100upx;
    border-bottom: 1px #eee solid;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 0 10px;
    /* 添加左右内边距 */
}

.t-header-button {
    display: inline-block;
    align-items: center;
    height: 60upx;
    line-height: 60upx;
    font-size: 30upx;
    color: #FF5E10;
    padding: 0px 20upx;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #FF5E10;

    &.active {
        color: #ffffff;
        background-color: #FF5E10;
    }

}

.t-body {
    display: block;
    width: 100vw;
    height: 160px;
    position: relative;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px -4px 4px #dfdfdf;
    display: flex;
    flex-wrap: wrap; // 允许换行
    overflow-x: hidden; // 禁止横向滚动
    white-space: normal; // 允许换行
    overflow-y: auto; // 允许上下滚动

    .action-button {
        display: inline-block;
        width: 25%; // 每行显示4个按钮
        height: 48px;
        text-align: center;
        margin: 5px 0;

        .icon {
            display: block;
            margin: 0 auto;
            width: 28px;
            height: 28px;
        }

        .label {
            text-align: center;
            width: 100%;
            display: inline-block;
            font-size: 12px;
        }
    }

}
</style>
